<script setup>
defineOptions({
  name: 'GoodDetail'
})
import { useRoute, useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import { getGoodsDetail } from '@/api/category.js'
import { useCartStore } from '@/stores/cart'
import 'vant/es/toast/style'
import { showSuccessToast } from 'vant'
import { updateCollection } from '@/api/collect.js'

const cartStore = useCartStore()
const route = useRoute()
const router = useRouter()
const data = ref(false)
const mode = ref('')
const num = ref(1)
const togNum = (nu) => (num.value = nu)
onMounted(() => flush())

const flush = async () => {
  const res = await getGoodsDetail(route.params.id)
  data.value = res
  mode.value = res.goods.details.replace(
    /width="[\d]+" height="[\d]+"/,
    'style="width:100vw;height:100%"'
  )
}

const add = async (push) => {
  cartStore.addCarts({
    num: num.value,
    goods_id: data.value.goods.id
  })
  push ? router.push('/cart') : ''
}

const togCollect = async (id) => {
  const { status } = await updateCollection(id)
  status === 201 ? showSuccessToast('收藏成功') : showSuccessToast('取消收藏')
  flush()
}
</script>

<template>
  <div v-if="data">
    <shopNavbar :title="data.goods.title + '详情'"></shopNavbar>
    <div>
      <img :src="data.goods.cover_url" alt="" />
      <h3 align="center" class="p-2 text-white" style="background: #ff6a00">
        {{ data.goods.title }}
      </h3>
      <div class="px-3">
        <p class="bg-light p-2">
          {{ data.goods.description }}
        </p>
        <div class="badges">
          <span
            v-for="(value, index) in ['新书', '推荐', '特价', '节日活动']"
            :key="index"
            v-text="value"
          >
          </span>
        </div>
        <div class="d-flex justify-content-between align-items-center my-3">
          <h3 style="color: #ff6a00">￥{{ data.goods.price }}.00</h3>
          <span class="text-secondary">
            剩余<b>{{ data.goods.stock }}</b
            >件
          </span>
        </div>
        <div class="d-flex justify-content-between align-items-center">
          <span>我要买</span>
          <div class="d-flex justify-content-between align-items-center">
            <span style="color: #ff6a00">(不限购)</span>
            <togGoodNum
              :stock="data.goods.stock"
              :num="num"
              @togNum="togNum"
            ></togGoodNum>
          </div>
        </div>
        <div class="d-flex justify-content-end align-items-center">
          <div
            class="d-flex flex-column mx-3 justify-content-center align-items-center"
            v-if="!data.goods.is_collect"
            @click="togCollect(data.goods.id)"
          >
            <van-icon size="20" name="star-o" />
            <span>收藏</span>
          </div>
          <div
            v-else
            class="d-flex flex-column mx-3 justify-content-center align-items-center"
            @click="togCollect(data.goods.id)"
          >
            <van-icon size="20" name="star" color="#ff6a00" />
            <span>已收藏</span>
          </div>
          <button class="button button-left" @click="add">加入购物车</button>
          <button class="button button-right" @click="add(true)">
            立即购买
          </button>
        </div>
      </div>
    </div>
    <van-tabs color="red" class="my-3">
      <van-tab title="概述"><div v-html="mode"></div></van-tab>
      <van-tab title="热评(0)">
        <van-empty description="该商品还没有评论呀">
          <van-button round type="danger" class="bottom-button px-5"
            >去发表评论</van-button
          >
        </van-empty>
      </van-tab>
      <van-tab title="相关图书">
        <van-row justify="between" class="bg-white" :gutter="[20, 20]">
          <van-col span="12" v-for="item in data.like_goods" :key="item.id">
            <goodListItem :info="item"></goodListItem>
          </van-col>
        </van-row>
      </van-tab>
    </van-tabs>
  </div>
</template>

<style lang="scss" scoped>
.badges {
  span {
    border: 1px solid red;
    color: red;
    background-color: white;
    padding: 5px;
    border-radius: 3px;
    font-size: 16px;
    margin: 0px 10px 0px 0px;
  }
  margin: 10px 0px;
}
.button {
  border: 0;
  width: 103px;
  height: 40px;
  color: white;
}
.button-left {
  border-radius: 20px 0 0 20px;
  background: linear-gradient(90deg, #ffd01e, #ff8917);
}
.button-right {
  border-radius: 0 20px 20px 0;
  background: linear-gradient(90deg, #ff6034, #ee0a24);
}
</style>
